<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Interactive BOM</title>
    <meta
      name="description"
      content="Kitspace is a place to share electronics projects."
    />
    <style>
      @font-face {
        font-family: 'Noto Sans';
        font-style: normal;
        font-weight: 400;
        src: local('Noto Sans'), local('NotoSans'),
          url(/images/NotoSans.ttf) format('truetype');
      }
      @font-face {
        font-family: 'Noto Sans';
        font-style: normal;
        font-weight: 700;
        src: local('Noto Sans Bold'), local('NotoSans-Bold'),
          url(/images/NotoSansBold.ttf) format('truetype');
      }
      #content {
        height: 100%;
      }
      #content > div {
        height: 100%;
      }
      #content > div > div.ibom_wrapper {
        height: 100%;
      }
      #content > div > div.ibom_wrapper > div.ibom {
        height: calc(100% - 70px);
      }
      #content div.ibom .menu input[type='checkbox'] {
        margin: 3px 3px 3px 4px;
      }
      #content div.ibom .menu input[type='radio'] {
        margin: 3px 3px 3px 4px;
      }
      #content div.ibom .menu-content {
        box-sizing: content-box;
      }
      #content div.ibom .shameless-plug span {
        margin-right: 2px;
      }
      .topmostdiv {
        --pcb-edge-color: black;
        --pad-color: #878787;
        --pad-color-highlight: #d04040;
        --pin1-outline-color: #ffb629;
        --pin1-outline-color-highlight: #b4ff03;
        --silkscreen-edge-color: #aa4;
        --silkscreen-polygon-color: #4aa;
        --silkscreen-text-color: #4aa;
        --fabrication-edge-color: #907651;
        --fabrication-polygon-color: #907651;
        --fabrication-text-color: #a27c24;
        --track-color: #def5f1;
        --track-color-highlight: #d04040;
        --zone-color: #def5f1;
        --zone-color-highlight: #d0404080;
      }
    </style>
    <script type="text/javascript" src="/vendor.js"></script>
    <script type="text/javascript" src="/ibom-scripts.js"></script>
    <script>
      var config = {
        dark_mode: false,
        show_pads: true,
        show_fabrication: false,
        show_silkscreen: true,
        highlight_pin1: true,
        redraw_on_drag: true,
        board_rotation: 0,
        checkboxes: 'Sourced,Placed',
        bom_view: 'left-right',
        layer_view: 'FB',
        extra_fields: []
      }
      var pcbdata = null
    </script>
    <link rel="stylesheet" href="interactive_bom.css" />
    <script
      async
      defer
      data-domain="kitspace.org"
      src="https://plausible.io/js/plausible.outbound-links.js"
    ></script>
    <script>
      window.plausible =
        window.plausible ||
        function() {
          ;(window.plausible.q = window.plausible.q || []).push(arguments)
        }
    </script>

    <link
      href="/images/apple-touch-icon.png"
      rel="apple-touch-icon"
      sizes="180x180"
    />
    <link
      href="/images/favicon-96x96.png"
      rel="icon"
      sizes="96x96"
      type="image/png"
    />
    <link
      href="/images/favicon-48x48.png"
      rel="icon"
      sizes="48x48"
      type="image/png"
    />
    <link
      href="/images/favicon-32x32.png"
      rel="icon"
      sizes="32x32"
      type="image/png"
    />
    <link
      href="/images/favicon-16x16.png"
      rel="icon"
      sizes="16x16"
      type="image/png"
    />
    <link
      color="#373737"
      href="/images/safari-pinned-tab.svg"
      rel="mask-icon"
    />
  </head>
  <body>
    <div id="content"></div>
    <script type="text/javascript" src="app.js"></script>
  </body>
</html>
